<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta who="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .talk_con {
            width: 600px;
            height: 500px;
            border: 1px solid #666;
            margin: 50px auto 0;
            background: #f9f9f9;
        }
        
        .talk_show {
            width: 580px;
            height: 420px;
            border: 1px solid #666;
            background: #fff;
            margin: 10px auto 0;
            overflow: auto;
        }
        
        .talk_input {
            width: 580px;
            margin: 10px auto 0;
        }
        
        .whotalk {
            width: 80px;
            height: 30px;
            float: left;
            outline: none;
        }
        
        .talk_word {
            width: 420px;
            height: 26px;
            padding: 0px;
            float: left;
            margin-left: 10px;
            outline: none;
            text-indent: 10px;
        }
        
        .talk_sub {
            width: 56px;
            height: 30px;
            float: left;
            margin-left: 10px;
        }
        
        .atalk {
            margin: 10px;
        }
        
        .atalk span {
            display: inline-block;
            background: green;
            border-radius: 10px;
            color: #fff;
            padding: 5px 10px;
        }
        
        .btalk {
            margin: 10px;
            text-align: right;
        }
        
        .btalk span {
            display: inline-block;
            background: blue;
            border-radius: 10px;
            color: #fff;
            padding: 5px 10px;
        }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div class="talk_con">
        <div class="talk_show" id="words">
            <div :class="item.who=='A'? 'atalk':'btalk' " v-for="(item,index) in arr" :key="index"><span>{{item.who}}说：{{item.words}}</span></div>
            <!-- <div class="atalk"><span>A说：吃饭了吗？</span></div>
            <div class="btalk"><span>B说：还没呢，你呢？</span></div> -->
        </div>
        <div class="talk_input">
            <select class="whotalk" id="who" v-model="selVal">
                <option value="A">A说：</option>
                <option value="B">B说：</option>
            </select>
            <input type="text" class="talk_word" id="talkwords" v-model="textVal">
            <input type="button" value="发送" class="talk_sub" id="talksub" @click="send">
        </div>
    </div>
    <script>
        new Vue({
            el: '.talk_con',
            data: {
                arr: [{
                    who: 'A',
                    words: '吃饭了吗？'
                }, {
                    who: 'B',
                    words: '还没呢，你呢？'
                }],
                selVal: 'A',
                textVal: ''
            },
            methods: {
                send() {
                    if (this.textVal.trim() == '') {
                        alert('说点什么吧')
                        return
                    }

                    this.arr.push({
                        who: this.selVal,
                        words: this.textVal
                    })

                    this.textVal = ''
                }
            },
        })
    </script>
</body>

</html>